<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
      + path + "/";
%>
<head>
<base href="<%=basePath%>">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="format-detection" content="telephone=no">
  <title>交易流水</title>
  <script id="time" data-time="${time}"></script>
  <script>
  var time = document.querySelector("#time").dataset.time
  var now = Date.now()  
  if(now-time>2000){
    location.reload()
  }
  </script>
  <script src="static/js/lib/cssrem.js"></script>
<link href="static/css/style.css" rel="stylesheet"></head>

<body>
  <div class="content">
  <c:if test="${msg !='00'}">
    <div class="wrapper prompt">
      <div class="f28 g6">${msg }</div> 
    </div>
   </c:if>
   <c:if test="${msg =='00'}">
    <div class="wrapper">
      <div class="order-list">
      <input type="hidden" id="size" value="${size }"/>
      <input type="hidden" id="keyword" value="${keyword }"/>
      <c:choose>
      <c:when test="${not empty tfList}">
      <c:forEach items="${tfList}" var="t" varStatus="vs">
        <div class="order-item bgwh g3">
          <div class="cell pt20 pb20">
            <div class="cell__bd f28 pl20 g3">交易流水号:${t.codePre }${t.id }${t.codeSuf }</div>
            <div class="cell__fd b f26 text-danger"><c:if test="${t.type != 'refund' }"><c:if test="${t.state == '00' }">待付款</c:if><c:if test="${t.state == '01' }">已付款</c:if><c:if test="${t.state == '02' }">已取消</c:if></c:if>
              <c:if test="${t.type == 'refund' }"><c:if test="${t.state == '00' }">未退款</c:if><c:if test="${t.state == '01' }">已退款</c:if><c:if test="${t.state == '02' }">已取消</c:if></c:if>
            </div>
          </div>
          <div class="cell pt20 pb20 pl20 ui-1px-t">
            <div class="cell__bd f28"> <em class="g9">汇付识别码：</em> <em class="g3 b">${t.remittanceCode }</em> </div>
            <div class="cell__fd f26"><em class="g9 f24">实收金额：</em><em class="g3 b f28">${t.totalPrice }</em></div>
          </div>
          <ul class="flow-type p20 ui-1px-t f26">
            <li class="clearfix g9"> <span class="l">交易类型</span> 
            <span class="r"><c:if test="${t.type == 'consume' }">消费</c:if><c:if test="${t.type == 'refund' }">退款</c:if><c:if test="${t.type == 'recharge' }">充值</c:if></span> </li>
            <li class="clearfix g9"> <span class="l">下单时间</span> <span class="r">${t.createTime }</span> </li>
            <li class="clearfix g9"> <span class="l">打款时间</span> <span class="r"><c:if test="${t.state == '01' }">${t.finishTime }</c:if><c:if test="${t.state != '01' }">未完成</c:if></span> </li>
            <li class="clearfix g9"><c:if test="${t.type == 'refund' }"><span class="l">收款人</span> <span class="r">${t.phone }</span></c:if><c:if test="${t.type != 'refund' }"><span class="l">打款人</span> <span class="r">${t.phone }</span></c:if> </li>
          </ul>
          <div class="cell pt20 pb20 ml20 ui-1px-t">
            <div class="cell__bd f28 g3 tr"> <a class="btn dib f24 g3 mr20" href="<%=basePath%>wap/transaction/toVoucher?id=${t.id }">支付详情</a> </div>
          </div>
        </div>
        </c:forEach>
        </c:when>
        
        </c:choose>
      </div>
      <div class="data-load-end f28 tc dn g6 pb20">未找到更多数据!</div>
    </div>
   </c:if>
  </div>
<script type="text/javascript" src="static/js/lib/vendor.js"></script>
<script type="text/javascript" src="static/js/lib/app.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
      var v = document.getElementById('size').value;
        v<10?loadDataEnd():dropDownDoad(); 
    });
    
    // 数据加载完成显示提示状态
    function loadDataEnd() {
  	var status = document.querySelector('.data-load-end')
      status.classList.remove('dn');
    }

    function dropDownDoad() {
      var content = document.querySelector('.content')
      
      var list = document.querySelector('.order-list')
      var screenHeight, pageHeight, sTop, diff, remainder, isLoad = true;
      screenHeight = content.clientHeight;
      pageHeight = content.children[0].offsetHeight;
      var page = 2;
      function init() {
        sTop = content.scrollTop;
        screenHeight = content.clientHeight;
        pageHeight = content.children[0].clientHeight;
        diff = pageHeight - screenHeight - sTop;
        return diff;
      }
     
      // 获取数据
      function getDate(remainder) {
    	  var keyword = document.getElementById('keyword').value;
    	 var html ='';
        if (remainder < 5 && isLoad) {
          axios({
            method: 'get',
            url: '<%=basePath%>wap/transaction/ajaxList?page='+page+'&keyword='+keyword,
            data: { page:page}
          }).then(function (res) {
            // 成功获取数据
            var tfList= res.data.tfList;
            var num=res.data.size;
            for(var i=0;i<tfList.length;i++){
               html+= template(tfList[i])
            }
            list.insertAdjacentHTML('beforeend',html)
            console.log(html)
            if(num ==10){
               	page= page +1
                isLoad = true;
            }else{
            	isLoad = false;
            	loadDataEnd();
            }
            
          }).catch(function (err) {
            // 获取数据失败
            console.error(err);
            isLoad = true;
          });
          isLoad = false;
        }
      }
      // 初始化状态
      remainder = init();
      // 初始化加载数据
      getDate(remainder);      // 滚动加载数据
      content.addEventListener('scroll', function () {
        remainder = init();
        getDate(remainder);
      })

    }
    
    
  function template(v){
    var html = '<div class="order-item bgwh g3"><div class="cell pt20 pb20"><div class="cell__bd f28 pl20 g3">交易流水号:'+v.codePre+v.id+v.codeSuf+'</div>'
   	html+='<div class="cell__fd b f26 text-danger">'
      if(v.type=="refund"){
      	if(v.state=="00"){
      		html+="未退款"
      	}else if(v.state=="01"){
      		html+="已退款"
      	}else if(v.state=="02"){
      		html+="已取消"
      	}
      }else{
    	  if(v.state=="00"){
    		  html+="待付款"
    	  }else if(v.state=="01"){
    		  html+="已付款"
    	  }else if(v.state=="02"){
    		  html+="已取消"
    	  }
      }
   	html+='</div></div><div class="cell pt20 pb20 pl20 ui-1px-t"><div class="cell__bd f28"><em class="g9">汇付识别码：</em><em class="g3 b">'+v.remittanceCode+'</em></div>'+
   	'<div class="cell__fd f26"><em class="g9 f24">实收金额：</em><em class="g3 b f28">'+v.totalPrice+'</em></div></div>'+
   	'<ul class="flow-type p20 ui-1px-t f26"><li class="clearfix g9"><span class="l">交易类型</span> <span class="r">'
    if(v.type=="consume"){
    	html+="消费"
    }else if(v.type=="recharge"){
    	html+="充值"
    }else if(v.type=="refund"){
    	html+="退款"
    }
    html+='</span></li><li class="clearfix g9"><span class="l">下单时间</span><span class="r">'+v.createTime+'</span></li>'
    
    html+='<li class="clearfix g9"><span class="l">打款时间</span><span class="r">'
    		if(v.state=="01"){
    			html+=v.finishTime
    		}else{
    			html+="未完成"
    		}
    		
  	html+='</span></li>'
    		
    html+='<li class="clearfix g9"><span class="l">'
  		if(v.type=="refund"){
  				html+="收款人"
  		}else{
  			html+="打款人"
  		}
    html+='</span><span class="r">'+v.phone+'</span></li>'		
    html+='</ul>'+
    '<div class="cell pt20 pb20 ml20 ui-1px-t"><div class="cell__bd f28 g3 tr"><a class="btn dib f24 g3 mr20" href="wap/transaction/toVoucher?id='+v.id+'">支付凭证</a></div></div></div>'
    return html;
  } 
    
    
  </script>

</body>
</html>
